<template>
  <vxe-modal
    v-model="visible"
    width="600px"
    title="修改密码"
    show-footer
    @close="cancel"
    destroy-on-close
  >
    <el-form
      :model="resetPwdInfo"
      :rules="rules"
      ref="resetPwdForm"
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="新密码：" prop="newPassword">
        <el-input
          type="password"
          v-model="resetPwdInfo.newPassword"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="confirmPassword">
        <el-input
          type="password"
          v-model="resetPwdInfo.confirmPassword"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" v-loading="submitLoading" @click="submitForm"
        >确 定</el-button
      >
      <el-button @click="cancel">取 消</el-button>
    </span>
  </vxe-modal>
</template>

<script>
import request from "@/utils/request";
import JSEncrypt from "jsencrypt/bin/jsencrypt.min";

export default {
  name: "ResetPwd",
  props: {
    value: {
      type: Boolean,
      require: true
    },
    userId: {
      type: String,
      require: true
    }
  },
  data() {
    const validateNewPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        let pattern = /([a-zA-z]+\d+\S*\W+\S*)|(\d+[a-zA-z]+\S*\W+\S*)|(\d+\W+\S*[a-zA-z]+\S*)|([a-zA-z]+\W+\S*\d+\S*)|(\W+[a-zA-z]+\S*\d+\S*)|(\W+\d+\S*[a-zA-z]+\S*)/;
        if (value.length < 8 || !pattern.test(value)) {
          callback(
            new Error(
              "密码必须同时由字母、数字、特殊符号(不包括_)等8位以上字符组成。"
            )
          );
          return;
        }
        if (this.resetPwdInfo.confirmPassword !== "") {
          this.$refs.resetPwdForm.validateField("confirmPassword");
        }
        callback();
      }
    };
    const validateConfirmPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resetPwdInfo.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      visible: false,
      rsaPublic: undefined,
      submitLoading: false,
      resetPwdInfo: {
        newPassword: "",
        confirmPassword: ""
      },
      rules: {
        newPassword: [
          { required: true, validator: validateNewPass, trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, validator: validateConfirmPass, trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    value(v) {
      if (v) {
        this.loadPublicKey();
      } else {
        this.visible = v;
      }
    }
  },
  methods: {
    cancel() {
      this.resetPwdInfo = {
        newPassword: "",
        confirmPassword: ""
      };
      this.$emit("input", false);
    },
    loadPublicKey() {
      request.post("/getRsaPublic").then(r => {
        if (r && r.parameters && r.parameters.rsaPublic) {
          this.visible = true;
          this.rsaPublic = r.parameters.rsaPublic;
        } else {
          this.msgError("获取数据失败");
        }
      });
    },
    submitForm() {
      this.$refs["resetPwdForm"].validate(valid => {
        if (valid) {
          this.submitLoading = true;
          let encrypt = new JSEncrypt();
          encrypt.setPublicKey(this.rsaPublic);
          request
            .post("/admin/sysUser/doResetPassword", {
              userId: this.userId,
              newPassword: encrypt.encrypt(this.resetPwdInfo.newPassword)
            })
            .then(r => {
              if (r && r.success) {
                this.msgSuccess(r.message || "重置密码成功");
                this.cancel();
              } else {
                this.msgError(r.message || "重置密码失败");
              }
            })
            .finally(() => {
              this.submitLoading = true;
            });
        }
      });
    }
  }
};
</script>

<style scoped></style>
